<template>
  <div class="home-page">
    <div class="tool-box">
      <lang-switcher class="m-home-langs" :lang="lang" @on-change="setLang" />
      <user-dropdown class="m-user-operator" @onLogout="onLogout" />
    </div>
    <el-container>
      <side-bar :route-list="routeList" @on-swich-route="switchRoute" />
      <el-container>
        <el-header>
          <main-header-container @on-swich-route="switchRoute" />
        </el-header>
        <el-main class="main-container">
          <keep-alive>
            <router-view />
          </keep-alive>
          <el-backtop :visibility-height="300" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LangSwitcher from "@/components/lang-switcher";
import UserDropdown from "@/components/user-dropdown";

import { lang as LangMixin } from "@/mixins";

import { mapActions, mapState } from "vuex";
import {
  SET_TAB_LIST,
  SET_CURRENT_TAB,
  INIT_TAB,
} from "@/store/tabs/actionTypes";
import { SideBar, MainHeaderContainer } from "@/components/layout";
import { routes } from "@/router";
import { NAV_TABS, NAV_CURRENT_TAB, CUR_USER_INFOS } from "@/configs/keys";
import { setLocalStorage, getLocalStorage } from "@/libs/utils";

export default {
  name: "Home",
  components: {
    SideBar,
    MainHeaderContainer,
    LangSwitcher,
    UserDropdown,
  },
  mixins: [LangMixin],
  data() {
    return {
      routes,
    };
  },
  computed: {
    ...mapState("tabs", ["tabList", "currentTab"]),
    routeList() {
      const homeRoute = this.routes[0],
        { children = [] } = homeRoute;

      return children ? children.filter((r) => !r.redirect) : [];
    },
  },
  watch: {
    tabList(newVal) {
      // SET_LOCAL_NAV_TABS
      setLocalStorage(NAV_TABS, newVal);
    },
    currentTab(newVal) {
      if (newVal) {
        setLocalStorage(NAV_CURRENT_TAB, newVal);
        this.$router.push({
          name: newVal.name,
        });
      }
    },
  },
  mounted() {
    this.openMessage();
  },
  methods: {
    ...mapActions("tabs", [SET_TAB_LIST, SET_CURRENT_TAB, INIT_TAB]),
    openMessage() {
      // setTimeout(() => {
      //   this.$showMsg({
      //     type: "info",
      //     message: "我是提示",
      //   });
      //   setTimeout(() => {
      //     this.$showMsg({
      //       type: "success",
      //       message: "我是成功",
      //     });
      //     setTimeout(() => {
      //       this.$showMsg({
      //         type: "error",
      //         message: "我是错误",
      //       });
      //       setTimeout(() => {
      //         this.$showMsg({
      //           type: "warn",
      //           message: "我是告警, 并且带模态框",
      //           isShowMask: true,
      //         });
      //       }, 2000);
      //     }, 2000);
      //   }, 2000);
      // }, 2000);
    },
    switchRoute(currentRoute) {
      const { name = "" } = currentRoute;
      this.$router.push({
        name,
        query: {},
        params: {},
      });
    },
    onLogout() {
      this.$confirm(this.$t("USER.Logout"), this.$t("COMMON.Tip"), {
        confirmButtonText: this.$t("COMMON.Yes"),
        cancelButtonText: this.$t("COMMON.No"),
      })
        .then(() => {
          this.logoutUser();
        })
        .catch(() => {});
    },
    logoutUser() {
      const crtUser = getLocalStorage(CUR_USER_INFOS);
      if (crtUser?.userInfos?.token) {
        delete crtUser.userInfos.token;
      }
      setLocalStorage(CUR_USER_INFOS, crtUser);

      this[INIT_TAB]();

      this.$router.replace("/user");

      this.$message.success(
        this.$t("COMMON.OpSuccess", {
          content: this.$t("USER.Logout"),
        })
      );
    },
  },
};
</script>

<style scoped lang="scss">
.home-page {
  position: relative;

  .main-container {
    width: 100%;
    margin-top: 40px;
  }

  .tool-box {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 20px;
    text-align: right;

    .m-home-langs {
      position: relative;
    }
  }
}
</style>
